<template>
  <div class="dept-auditor-select-wrap">
    <div v-if="page === -1" class="tab-box">
      <div v-for="(item, index) in belongStruct" :key="index + 3" class="tab-btn" @click="tabClick(index, item.departmentName)">
        <img :src="auditorBtnIcon" alt="">
        {{ item.departmentName }}
      </div>
    </div>
    <div v-else class="content-box">
      <div class="content-header" @click="backFirst">
        <i class="el-icon-arrow-left" />
        {{ contentTitle }}
      </div>
      <div class="content-item-box">
        <template v-for="(item, index) in belongStruct">
          <dept-select-list
            v-if="contentType === index"
            :key="index"
            :max="max"
            :breadcrumb-data="[item]"
            :select-items.sync="selectItemIds"
            :select-users.sync="_selectedAuditors" />
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import DeptSelectList from './deptSelectList';
import { searchDeptCharater } from '@/api/select';
import auditorBtnIcon from '@/assets/auditor_btn_icon.png';
export default {
  name: 'DeptAuditorSelect',
  components: { DeptSelectList },
  props: {
    departmentList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selectedAuditors: { // 最终选择的审批人
      type: Array,
      default: () => {
        return [];
      }
    },
    tagSelecteds: { // 显示的tag数据
      type: Array,
      default: () => {
        return [];
      }
    },
    max: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      deptIds: null,
      belongStruct: null,
      auditorBtnIcon,
      page: -1,
      contentType: 0,
      contentTitle: ''
    };
  },
  computed: {
    selectItemIds: { // 所选择的人员或者部门的id
      get() {
        return this.tagSelecteds;
      },
      set(val) {
        this.$emit('update:tagSelecteds', val);
      }
    },
    _selectedAuditors: {
      get() {
        return this.selectedAuditors;
      },
      set(val) {
        this.$emit('update:selectedAuditors', val);
      }
    }
  },
  watch: {
    departmentList: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.deptIds = newVal.map(item => item.id);
          this.searchDeptCharater();
        }
      },
      immediate: true
    }
  },
  methods: {
    backFirst() {
      this.page = -1;
    },
    tabClick(type, title) {
      this.page = 1;
      this.contentType = type;
      this.contentTitle = title;
    },
    searchDeptCharater() {
      const param = {
        ids: this.deptIds.join(',')
      };
      searchDeptCharater(param).then(res => {
        if (res.code === 200) {
          this.belongStruct = res.data;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tab-box {
  padding-left: 19px;
  height: 458px;
  @include scrollBar();
  .tab-btn {
    img {
      width: 17px;
      height: 17px;
      margin-right: 16px;
    }
    cursor: pointer;
    display: flex;
    margin-bottom: 32px;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}
.content-header {
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding-left: 22px;
  i {
    margin-right: 12px;
  }
}
</style>
